<div class="content-warp">
  <div class="content-header">
    <i class="anticon anticon-left-circle-o" (click)="goBack()"></i>
    <span class="content-title">{{groupName}}</span>
  </div>
  <div class="content-body">
    <nz-spin [nzSpinning]="_isSpinning">
      <form nz-form [formGroup]="validateForm">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>活动名称：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('name')">
            <div class="p-pr" style="width:300px;">
            					            	<textarea
                                      formControlName="name"
                                      placeholder="请输入活动名称"
                                      class="ant-input ng-pristine ng-valid ng-touched ant-input-disabled"
                                      rows="2"
                                      disabled="disabled"
                                      readonly="readonly"
                                      style="width:300px;" maxlength="30"></textarea>
              <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
                {{30-(validateForm.controls.name.value?validateForm.controls.name.value.length:0) }}
              </div>
            </div>
          </div>
          <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('name')">-->
          <!--<nz-input [nzDisabled]="stage===2||stage===3" [nzSize]="'large'" formControlName="name" [nzPlaceHolder]="'请输入活动名称'"></nz-input>-->
          <!--<div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入活动名称</div>-->
          <!--<div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('maxlength')">活动名称不能超过30个字</div>-->
          <!--</div>-->
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品设置：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('goods_id')">
            <div class="init-content" *ngIf="!checkedGoodsInfo['id']">
              <button nz-button [nzType]="'primary'" (click)="addGoods()">
                <span><i class="anticon anticon-plus"></i> 添加商品</span>
              </button>
            </div>
            <div class="checked-goods-container" *ngIf="!!checkedGoodsInfo['id']">
              <div class="name">
                <img src="{{aliyunOssOutputUrl+'/'+checkedGoodsInfo.first_picture}}" alt="">
                <div>{{checkedGoodsInfo.name}}</div>
              </div>
              <div class="info">
                <div><span class="title">商品分类</span>
                  <nz-tag [nzColor]="'#fff'" *ngFor="let ite of checkedGoodsInfo.goods_category">{{ite.name || ite}}
                  </nz-tag>
                  <span
                    *ngIf="checkedGoodsInfo.goods_category ? !checkedGoodsInfo.goods_category.length : true">无分类</span>
                </div>
                <div><span class="title">商品库存</span> <span>{{checkedGoodsInfo.in_stock}}</span></div>
                <button nz-button *ngIf="stage===1" [nzType]="'primary'" [nzSize]="'large'" class="fr change-goods-btn"
                        (click)="addGoods()">
                  <span>更改内容</span>
                </button>
              </div>
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('goods_id').dirty&&getFormControl('goods_id').hasError('required')">请选择拼团商品
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品属性：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <label nz-checkbox *ngFor="let item of checkedGoodsInfo['sku']" [nzDisabled]="stage===2||stage===3"
                   [ngModelOptions]="{standalone: true}" [(ngModel)]="item.checked" (ngModelChange)="dealSku()">
              <span>{{item.name||item.describe||'无规格'}}</span>
            </label>
            <div nz-form-explain *ngIf="!hasCheckedSku">请至少选择一个商品属性</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>成团人数：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('number')">
            <nz-input-number
              [nzDisabled]="stage===2||stage===3"
              formControlName="number"
              [nzMin]="0"
              [nzStep]="1"
              [nzPlaceHolder]="'请输入成团人数'"
              [nzSize]="'large'"></nz-input-number>
            <div nz-form-explain *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('required')">
              请输入成团人数
            </div>
            <div nz-form-explain *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('max')">
              成团人数不能超过20人
            </div>
            <div nz-form-explain *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('min')">
              成团人数不能小于2人
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('number').dirty&&getFormControl('number').hasError('notInteger')">成团人数必须为整数
            </div>

          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>参团价格：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('price')">
            <nz-input-number
              [nzDisabled]="stage===2||stage===3"
              formControlName="price"
              [nzMin]="0"
              [nzStep]="1"
              [nzPlaceHolder]="'请输入参团价格'"
              [nzSize]="'large'"></nz-input-number>
            <div nz-form-control class="isNew" [nzValidateStatus]="getFormControl('new_offer')">
              <label nz-checkbox formControlName="new_offer" [nzDisabled]="isNewGroup||disabledNewGroup">
                <span>是否新人参团</span>
              </label>
            </div>
            <div nz-form-explain *ngIf="getFormControl('price').dirty&&getFormControl('price').hasError('required')">
              请输入参团价格
            </div>
            <div nz-form-explain *ngIf="getFormControl('price').dirty&&getFormControl('price').hasError('priceToHigh')">
              参团价格不能高于商品价格
            </div>
            <div nz-form-explain *ngIf="getFormControl('price').dirty&&getFormControl('price').hasError('min')">
              参团价格不能少于0.01
            </div>
            <div nz-form-explain *ngIf="getFormControl('price').dirty&&getFormControl('price').hasError('max')">
              参团价格不能多于99999999
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>参团(开团)次数：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('round')">
            <nz-input-number
              [nzDisabled]="stage===2||stage===3"
              formControlName="round"
              [nzMin]="0"
              [nzStep]="1"
              [nzPlaceHolder]="'请输入参团次数'"
              [nzSize]="'large'"></nz-input-number>
            <span class="prompt-info">0表示无上限</span>
            <div nz-form-explain *ngIf="getFormControl('round').dirty&&getFormControl('round').hasError('required')">
              请输入参团次数
            </div>
            <div nz-form-explain *ngIf="getFormControl('round').dirty&&getFormControl('round').hasError('max')">
              参团次数不能大于999
            </div>
            <div nz-form-explain *ngIf="getFormControl('round').dirty&&getFormControl('round').hasError('notInteger')">
              参团次数必须为整数
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>拼团有效期：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('round')">
          <span nz-form-control [nzValidateStatus]="getFormControl('start_date')" class="date-pick-box">
            <nz-datepicker style="width: 100%;" nzShowTime
                           [nzDisabled]="stage===2||stage===3"
                           (ngModelChange)="start_date=$event;_startValueChange()"
                           formControlName="start_date"
                           [nzDisabledDate]="_disabledStartDate"
                           [nzFormat]="'YYYY-MM-DD'"
                           [nzPlaceHolder]="'开始时间'"></nz-datepicker>
            <div nz-form-explain
                 *ngIf="getFormControl('start_date').dirty&&getFormControl('start_date').hasError('required')">请选择拼团开始时间</div>
          </span> <span class="ver-top"> - </span>
            <span nz-form-control [nzValidateStatus]="getFormControl('end_date')" class="date-pick-box">
            <nz-datepicker style="width: 100%;" nzShowTime
                           [nzDisabled]="stage===3"
                           (ngModelChange)="end_date=$event;_endValueChange()"
                           formControlName="end_date"
                           [nzDisabledDate]="_disabledEndDate"
                           [nzFormat]="'YYYY-MM-DD'"
                           [nzPlaceHolder]="'结束时间'"></nz-datepicker>
            <div nz-form-explain
                 *ngIf="getFormControl('end_date').dirty&&getFormControl('end_date').hasError('required')">请选择拼团结束时间</div>
          </span>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>开团有效期：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <nz-input [nzSize]="'large'" [nzReadonly]="true" [nzDisabled]="true" [ngModelOptions]="{standalone: true}"
                      [ngModel]="'24小时'"></nz-input>
            <span class="prompt-info">团长开团后，在此有效期内，若组团失败，团员支付的钱，需退回</span>
          </div>
        </div>


        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>排序：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('sorts')">
            <nz-input-number
              formControlName="sorts"
              [nzStep]="1"
              [nzPlaceHolder]="'请输入排序'"
              [nzSize]="'large'"
            >
            </nz-input-number>
            <div nz-form-explain *ngIf="getFormControl('sorts').dirty&&getFormControl('sorts').hasError('required')">
              请输入排序
            </div>
            <div nz-form-explain *ngIf="getFormControl('sorts').dirty&&getFormControl('sorts').hasError('min')">不能低于0
            </div>
            <div nz-form-explain *ngIf="getFormControl('sorts').dirty&&getFormControl('sorts').hasError('max')">不能超过99
            </div>
            <div nz-form-explain *ngIf="getFormControl('sorts').dirty&&getFormControl('sorts').hasError('notInteger')">
              请输入整数
            </div>
          </div>
        </div>


        <div nz-form-item nz-row *ngIf="!isNewGroup">
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>随机免单：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('round')">
            <nz-radio-group [ngModelOptions]="{standalone: true}" [(ngModel)]="random_free"
                            (ngModelChange)="changeRandomFreeGroup()">
              <label nz-radio [nzValue]="0" [nzDisabled]="disabledClick||(stage===2||stage===3)||nosupportClick">
                <span>无</span>
              </label>
              <label nz-radio [nzValue]="1" [nzDisabled]="disabledClick||(stage===2||stage===3)||nosupportClick">
                <span>随机免单</span>
              </label>
              <label nz-radio [nzValue]="2" [nzDisabled]="disabledClick||(stage===2||stage===3)||nosupportClick">
                <span>团长免单</span>
              </label>
            </nz-radio-group>
          </div>
        </div>
        <div nz-form-item nz-row *ngIf="random_free && random_free === 1 && !isNewGroup">
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>免单人数：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('winners_number')">
            <nz-input-number
              [nzDisabled]="stage===2||stage===3"
              formControlName="winners_number"
              [nzMin]="0"
              [nzStep]="1"
              [nzPlaceHolder]="'请输入免单人数'"
              [nzDisabled]="nosupportClick"
              [nzSize]="'large'"></nz-input-number>
            <span class="prompt-info">大于0小于成团人数</span>
            <div nz-form-explain
                 *ngIf="getFormControl('winners_number').dirty&&getFormControl('winners_number').hasError('required')">
              请输入成团人数
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('winners_number').dirty&&getFormControl('winners_number').hasError('more')">
              免单人数不能小于成团人数
            </div>
          </div>
        </div>
        <div nz-form-item nz-row *ngIf="random_free && random_free === 1 && !isNewGroup">
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>免单比例：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('free_scale')">
            <nz-input-number
              [nzDisabled]="stage===2||stage===3||nosupportClick"
              style="width: 155px;"
              formControlName="free_scale"
              [nzMin]="0"
              [nzStep]="1"
              [nzPlaceHolder]="'请输入免单比例'"
              [nzSize]="'large'"></nz-input-number>
            <span class="percent">%</span>
            <span class="prompt-info">单用户优惠比例</span>
            <div nz-form-explain
                 *ngIf="getFormControl('free_scale').dirty&&getFormControl('free_scale').hasError('required')">请输入免单比例
            </div>
            <div nz-form-explain
                 *ngIf="getFormControl('free_scale').dirty&&getFormControl('free_scale').hasError('max')">免单比例不能大于100%
            </div>
          </div>
        </div>
        <div nz-form-item nz-row *ngIf="random_free && random_free === 1 && !isNewGroup">
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>团长必免：</div>
          <div nz-form-control [nzValidateStatus]="getFormControl('head_win')">
            <label nz-checkbox formControlName="head_win" [nzDisabled]="stage===2||stage===3||nosupportClick">
              <span></span>
            </label>
            <span class="prompt-info ver-top">成团后团长必定会免单，在免单人数内</span>
          </div>
        </div>
        <div nz-form-item nz-row *ngIf="random_free && random_free === 2 && !isNewGroup">
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">团长价格：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('head_free_price')">
            <nz-input-number
              formControlName="head_free_price"
              [nzMin]="0"
              [nzStep]="1"
              [nzDisabled]="true"
              [nzPlaceHolder]="'请输入团长价格'"
              [nzSize]="'large'"></nz-input-number>
          </div>
        </div>
        <div nz-form-item nz-row *ngIf="random_free && random_free === 2 && !isNewGroup" style="margin-bottom:15px;">
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">团长发货：</div>
          <div nz-form-control [nzValidateStatus]="getFormControl('is_give')">
            <label nz-checkbox formControlName="is_give" [nzDisabled]="disabledNewGroup||nosupportClick">
            </label>
          </div>
        </div>
        <div nz-form-item nz-row *ngIf="random_free && random_free === 2 && !isNewGroup">
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">小程序显示：</div>
          <div nz-form-control [nzValidateStatus]="getFormControl('is_show')">
            <label nz-checkbox formControlName="is_show" [nzDisabled]="disabledNewGroup||nosupportClick">
            </label>
          </div>
        </div>
        <div nz-form-item nz-row style="margin-bottom:8px;">
          <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
            <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="_submitForm()">确 认</button>
            <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack()"
                    style="margin-left: 20px">取 消
            </button>
          </div>
        </div>
      </form>
    </nz-spin>
  </div>
</div>

<!-- 添加商品弹窗 start -->

<nz-modal
  [nzVisible]="goodsModalVisible"
  [nzTitle]="'添加商品'"
  [nzWidth]="'700px'"
  [nzContent]="modalContent"
  (nzOnCancel)="closeModal()"
  (nzOnOk)="confirmCheckedGoods()">
  <ng-template #modalContent>
    <div class="operate-line text-right">
      <nz-select
        style="width: 110px;"
        nzAllowClear
        [nzSize]="'large'"
        [nzPlaceHolder]="'请选择分类'"
        [(ngModel)]="selectedGroup"
        [nzShowSearch]="true">
        <nz-option
          *ngFor="let type of groupList"
          [nzLabel]="type.name"
          [nzValue]="type.id">
        </nz-option>
      </nz-select>
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword"
                [nzPlaceHolder]="'输入商品名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchGoods()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="reset()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #nzTable
              [nzAjaxData]="goodsList"
              [nzLoading]="loading"
              [(nzPageIndex)]="page"
              [(nzPageSize)]="pageSize"
              [nzTotal]="total"
              (nzPageIndexChange)="getGoodsList()">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox>
        </th>
        <th nz-th><span>商品</span></th>
        <th nz-th><span>商品库存</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of goodsList">
        <td nz-td nzCheckbox>
          <i class="icon iconfont icon-radio-unchecked radio" *ngIf="currentClickGoods['id'] !== data.id"
             (click)="currentClickGoods = data"></i>
          <i class="icon iconfont icon-radio-checked checked radio" *ngIf="currentClickGoods.id === data.id"></i>
        </td>
        <td nz-td style="width: 420px;">
          <img class="goods-pic" src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt="">
          <div class="goods-info">
            <div class="goods-num">
              <span class="product-id mr-5" *ngIf="data.goods_number">
                <nz-popover [nzTitle]="'商品编号'" *ngIf="data.goods_number.length>1">
                  <span nz-popover>商品编号:{{ data.goods_number[0]+"..." }}</span>
                  <ng-template #nzTemplate>
                    <div style="max-width:300px">
                      <span class="dis-inline" *ngFor="let item2 of  data.goods_number;let i2=index">
                        <span style="display:inline-block;width:">{{item2}}</span><span
                        *ngIf="i2!=data.goods_number.length-1" class="ml-5 mr-5">|</span>
                      </span>
                    </div>
                  </ng-template>
                </nz-popover>
                <span *ngIf="data.goods_number.length==1">
                  商品编号:{{ data.goods_number[0] }}
                </span>
              </span>
              <div class="dis-inline">
                <nz-tag [nzColor]="'#1790FF'" *ngFor="let ite of data.goods_category">{{ite}}</nz-tag>
              </div>
            </div>
            <div class="goods-name">{{data.name}}</div>
          </div>
        </td>
        <td nz-td>
          <div style="margin-right: 30px;">
            {{data.in_stock}}
            <nz-progress [ngModel]="50" [nzShowInfo]="false"></nz-progress>
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>

<!-- 添加商品弹窗 end -->
